<template>
	<el-row :gutter="24">
		<el-col :span="24">
			<el-card style="margin-bottom: 10px">
				距离考试结束还有：<span style="color: #ff0000;">{{ min }}分钟{{ sec }}秒</span>
				<el-button style="float: right; margin-top: -10px" type="primary" icon="el-icon-plus" :loading="loading"
					@click="handHandExam()">
					提交试卷
				</el-button>
			</el-card>
		</el-col>
		<el-col :span="6">
			<el-card>

				<p class="card-title">答题卡</p>
				<el-row :gutter="24" class="card-line" style="padding-left: 10px">
					<el-tag type="info">未作答</el-tag>
					<el-tag type="success">已作答</el-tag>
				</el-row>

				<div v-if="paperData.radioList!==undefined && paperData.radioList.length > 0">
					<p class="card-title">单选题</p>
					<el-row :gutter="24" class="card-line">
						<el-tag v-for="(item ,index) in paperData.radioList"
							:type="cardItemClass(item.answered, item.quId)" @click="handSave(item)"> {{ index+1 }}
						</el-tag>
					</el-row>
				</div>

				<div v-if="paperData.multiList!==undefined && paperData.multiList.length > 0">
					<p class="card-title">多选题</p>
					<el-row :gutter="24" class="card-line">
						<el-tag v-for="(item ,index) in paperData.multiList"
							:type="cardItemClass(item.answered, item.quId)" @click="handSave(item)"> {{ index+1 }}
						</el-tag>
					</el-row>
				</div>

				<div v-if="paperData.judgeList!==undefined && paperData.judgeList.length > 0">
					<p class="card-title">判断题</p>
					<el-row :gutter="24" class="card-line">
						<el-tag v-for="(item ,index) in paperData.judgeList"
							:type="cardItemClass(item.answered, item.quId)" @click="handSave(item)"> {{ index+1 }}
						</el-tag>
					</el-row>
				</div>

			</el-card>
		</el-col>
		<el-col :span="18" :xs="24">

			<el-card class="qu-content">
				<p v-if="quData.timu">{{ quData.sort + 1 }}.{{ quData.timu }}</p>
				<div v-if="quData.type === 1 || quData.type===3">
					<el-radio-group v-model="radioValue">
						<el-radio v-for="item in quData.xuanxiang" :label="item.id">{{ item.xuanxiang }}
							<div v-if="item.image" style="clear: both" />
						</el-radio>
					</el-radio-group>
				</div>

				<div v-if="quData.quType === 2">

					<el-checkbox-group v-model="multiValue">
						<el-checkbox v-for="item in quData.answerList" :label="item.id">
							{{ item.xuanxiang }}
							<div v-if="item.image" style="clear: both" />
						</el-checkbox>
					</el-checkbox-group>

				</div>

			</el-card>

			<div style="margin-top: 20px">
				<el-button v-if="showPrevious" type="primary" icon="el-icon-back" @click="handPrevious()">
					上一题
				</el-button>

				<el-button v-if="showNext" type="warning" icon="el-icon-right" @click="handNext()">
					下一题
				</el-button>

			</div>

		</el-col>

	</el-row>
</template>

<script>
	import { Loading } from 'element-ui';
	export default {
		data() {
			return {
				// 全屏/不全屏
				isFullscreen: false,
				showPrevious: false,
				showNext: true,
				loading: false,
				handleText: '交卷',
				pageLoading: false,
				// 试卷ID
				paperId: '',
				// 当前答题卡
				cardItem: {},
				allItem: [],
				// 当前题目内容
				quData: {
					answerList: []
				},
				// 试卷信息
				paperData: {
					leftSeconds: 99999,
					radioList: [],
					multiList: [],
					judgeList: []
				},
				// 单选选定值
				radioValue: '',
				// 多选选定值
				multiValue: [],
				// 已答ID
				answeredIds: [],
				min: '00',
				sec: '00'
			}
		},
		methods: {
			/**
			 * 下一题
			 */
			handNext() {
				const index = this.cardItem.sort + 1
				this.handSave(this.allItem[index])
				
			},

			/**
			 * 上一题
			 */
			handPrevious() {
				const index = this.cardItem.sort - 1
				this.handSave(this.allItem[index])
			},
			// 保存答案
			handSave(item, callback) {
				this.$ajax.post("/question/findbyid", {
					"id": item.id
				}).then(res => {
					this.quData = res.data.data
					console.log(this.quData);
				})

				this.$nextTick(()=>{
				if (item.id === this.allItem[0].id) {
					this.showPrevious = false
				} else {
					this.showPrevious = true
				}
				})
				console.log(1);
				// 最后一个索引
				const last = this.allItem.length - 1

				if (item.id === this.allItem[last].id) {
					this.showNext = false
				} else {
					this.showNext = true
				}

				const answers = this.multiValue
				if (this.radioValue !== '') {
					answers.push(this.radioValue)
				}

				const params = {
					paperId: this.paperId,
					quId: this.cardItem.quId,
					answers: answers,
					answer: ''
				}
				fillAnswer(params).then(() => {
					// 必须选择一个值
					if (answers.length > 0) {
						// 加入已答列表
						this.cardItem.answered = true
					}

					// 最后一个动作，交卷
					if (callback) {
						callback()
					}

					// 查找详情
					this.fetchQuData(item)
				})

			},
			// 试卷详情
			fetchData(id) {
				var aa = window.sessionStorage.getItem("timu")
				var list = JSON.parse(aa)
				this.paperData.radioList = list[0]
				this.paperData.multiList = list[1]
				this.paperData.judgeList = list[2]
				this.$nextTick(() => {
					this.paperData.radioList.forEach(function(item) {
						this.allItem.push(item)
					})
					
					this.paperData.multiList.forEach(function(item) {
						this.allItem.push(item)
					})
					
					this.paperData.judgeList.forEach(function(item) {
						this.allItem.push(item)
					})
				});

				

				// 当前选定
				this.fetchQuData(this.cardItem)

				// 倒计时
				this.countdown()

			},
			fetchQuData(item) {
				// 打开
				this.$nextTick(()=>{
					
				const loading = loading.service({
					text: '拼命加载中',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				})

				// 获得详情
				this.cardItem = item

				// 查找下个详情
				const params = {
					paperId: this.paperId,
					quId: item.quId
				}
				quDetail(params).then(response => {
					console.log(response)
					this.quData = response.data
					this.radioValue = ''
					this.multiValue = []

					// 填充该题目的答案
					this.quData.answerList.forEach((item) => {
						if ((this.quData.quType === 1 || this.quData.quType === 3) && item.checked) {
							this.radioValue = item.id
						}

						if (this.quData.quType === 2 && item.checked) {
							this.multiValue.push(item.id)
						}
					})

					// 关闭详情
					loading.close()
				})
			},
			// 答题卡样式
			cardItemClass(answered, quId) {
				if (quId === this.cardItem.quId) {
					return 'warning'
				}

				if (answered) {
					return 'success'
				}

				if (!answered) {
					return 'info'
				}
			},
		},
		created() {

			this.fetchData()
		}
	}
</script>

<style scoped>
	.qu-content div {
		line-height: 30px;
	}

	.el-checkbox-group label,
	.el-radio-group label {
		width: 100%;
	}

	.card-title {
		background: #eee;
		line-height: 35px;
		text-align: center;
		font-size: 14px;
	}

	.card-line {
		padding-left: 10px
	}

	.card-line span {
		cursor: pointer;
		margin: 2px;
	}

	/deep/ .el-radio,
	.el-checkbox {
		padding: 9px 20px 9px 10px;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		margin-bottom: 10px;
	}

	.is-checked {
		border: #409eff 1px solid;
	}

	.el-radio img,
	.el-checkbox img {
		max-width: 200px;
		max-height: 200px;
		border: #dcdfe6 1px dotted;
	}

	/deep/ .el-checkbox__inner {
		display: none;
	}

	/deep/ .el-radio__inner {
		display: none;
	}

	/deep/ .el-checkbox__label {
		line-height: 30px;
	}

	/deep/ .el-radio__label {
		line-height: 30px;
	}
</style>
